<template>
  <div class="ComposeMaterial">
    <!-- 顶部内容 -->
    <div class="title_box">
      <div class="memory">
        <a-row justify="space-between" align="middle">
          <a-col style="cursor: pointer; margin-right: 30px">
            <a-tooltip>
              <template #title
                >免费空间： {{ state.capacityToTalFormat }}
              </template>
              {{ state.capacityFormat }} / {{ state.capacityToTalFormat }}
              <span :style="percent >= 100 ? 'color: red' : 'color: #666'">
                (已使用: {{ (state.percent < 1 ? 1 : state.percent) + "%" }})
              </span>
            </a-tooltip>
          </a-col>
          <a-space>
            <a-col style="cursor: pointer" @click="clearClick"
              ><delete-outlined style="margin-right: 5px" />清理</a-col
            >
            <a-col style="cursor: pointer" @click="addMater"
              ><inbox-outlined style="margin-right: 5px" />扩容</a-col
            >
            <a-col style="cursor: pointer" @click="goDowloadCenter"
              ><arrow-down-outlined class="qingli" />下载中心
            </a-col>
          </a-space>
        </a-row>
      </div>
    </div>

    <!-- 头部的搜索栏 -->
    <div class="serch_title">
      <div class="serch_left">
        <div class="serch_item">
          <span class="left_prefix">剪辑状态</span>
          <a-select
            placeholder="请选择剪辑状态"
            allow-clear
            class="input_self"
            ref="select"
            v-model:value="state.status"
            style="width: 229px"
            @focus="focus"
            @change="(e) => getMediaList()"
          >
            <a-select-option :value="0">剪辑中</a-select-option>
            <a-select-option :value="1">已完成</a-select-option>
            <a-select-option :value="2">失败</a-select-option>
          </a-select>
        </div>

        <div class="serch_item">
          <span class="left_prefix">剪辑名称</span>
          <a-input
            class="input_self"
            allow-clear
            @change="(e) => e.type == 'click' && getMediaList()"
            style="width: 229px"
            v-model:value="state.keyword"
            placeholder="请输入关键字搜索"
          >
          </a-input>
        </div>

        <div class="serch_item">
          <span class="left_prefix">创建时间</span>
          <a-range-picker
            class="input_timer"
            @change="timeChange"
            format="YYYY-MM-DD"
            style="width: 229px"
            v-model:value="state.time"
            show-time
          />
        </div>

        <a-button
          type="primary"
          :loading="state.serchLoding"
          @click="getMediaList"
          >查询</a-button
        >
        <a-button :loading="state.serchLoding" @click="resetSerch"
          >重置</a-button
        >
      </div>
    </div>

    <!-- 项目列表 和 素材列表 -->
    <div class="content_box">
      <!--  下方的素材列表 -->
      <!--  v-if="state.materialList.length" -->
      <div class="material_item_box">
        <template v-if="state.materialList.length">
          <div
            class="file-list"
            ref="containerRef"
            :gutter="{ xs: 8, sm: 16, md: 24 }"
            :wrap="true"
          >
            <div
              v-for="(item, index) in state.materialList"
              :key="item.id"
              style="width: 204px; cursor: pointer; margin-bottom: 15px"
              @click="showViewFilmRef(item.id, item)"
            >
              <div class="file-item">
                <div style="width: 100%" class="content_box">
                  <div class="type-box">
                    <!-- 未完成总数 大于 成功的数量 (进行中) -->
                    <template v-if="item.total_number - item.fail_number > 0">
                      <template
                        v-if="
                          item.total_number - item.fail_number >
                          item.success_number
                        "
                      >
                        <span class="schedule" style="background-color: #f3c548"
                          >进行中 ({{
                            item.success_number +
                            "/" +
                            (item.total_number - item.fail_number)
                          }})</span
                        >
                      </template>
                      <template v-else>
                        <span class="schedule"
                          >已完成 ({{
                            item.success_number +
                            "/" +
                            (item.total_number - item.fail_number)
                          }})</span
                        >
                      </template>
                    </template>
                    <template v-if="item.total_number - item.fail_number <= 0">
                      <span class="schedule" style="background-color: #f34848"
                        >合成失败!</span
                      >
                    </template>
                    <img
                      v-if="item.shotstack_response"
                      v-lazy="item?.shotstack_response?.poster"
                      class="image"
                      @load="imageLoaded(item)"
                      style="height: 120px; object-fit: contain"
                    />
                    <!-- 合成失败了 item.total_number - item.fail_number <= 0-->
                    <div class="loding_item" v-else-if="item.total_number - item.fail_number <= 0">
                      <span class="loding_text">合成失败!</span>
                    </div>
                    <!-- 加载中 -->
                    <div class="loding_item" v-else>
                      <div class="loding_progress">
                        <a-progress
                          :percent="100"
                          :showInfo="false"
                          type="line"
                          size="small"
                          :stroke-color="{
                            '0%': '#108ee9',
                            '100%': '#87d068',
                          }"
                          status="active"
                        />
                      </div>
                      <span class="loding_text">任务进行中...</span>
                      <div class="loding_dec">
                        <span>
                          <LoadingOutlined></LoadingOutlined>
                        </span>
                        <span class="loding_dec_text">正在合成视频......</span>
                      </div>
                    </div>
                    <div class="duration">
                      {{ item?.material_duration_text }}
                    </div>
                  </div>
                  <div class="vidoe_msg_box">
                    <div class="title">
                      <a-tooltip>
                        <template #title>
                          来源：「{{ item?.editing_record_title }}({{
                            item?.editing_record_id
                          }})」，任务名称：{{ item.title }}</template
                        >
                        <span class="text_ellipsis">
                          {{ item.title }}
                        </span>
                      </a-tooltip>

                      <a-popover placement="bottomLeft">
                        <template #content>
                          <div style="display: flex; flex-direction: column;">
                            <a-button
                              type="text"
                              style="width: 90px; text-align: left; padding: 0"
                              @click.stop="downAll(item)"
                              >下载全部</a-button
                            >
                            <a-button
                              type="text"
                              danger
                              style="width: 90px; text-align: left; padding: 0"
                              @click.stop="deleteClick(item)"
                              >删除</a-button
                            >
                          </div>
                        </template>
                        <span @click.stop="() => {}" class="ellipsisOutlined">
                          <MoreOutlined />
                        </span>
                      </a-popover>
                    </div>
                    <!-- 底部描述 -->
                    <div class="bottom_msg">
                      <a-tooltip>
                        <template #title>
                          「{{ item?.editing_record_title }}({{
                            item?.editing_record_id
                          }})」
                        </template>
                        <span>{{ item.updated_at }}</span>
                      </a-tooltip>
                    </div>
                    <div
                      class="tags_box"
                      v-if="item.relation && item.relation.length"
                    >
                      <div
                        v-for="(ele, index) in item.relation"
                        :key="index"
                        style="margin-bottom: 5px"
                      >
                        <a-tooltip>
                          <template #title>{{ ele.value }}</template>
                          <img
                            @click.stop="publishDetailHandle(item, index)"
                            :src="ele.image"
                            alt=""
                            style="width: 20px; height: 20px; margin-right: 6px"
                          />
                        </a-tooltip>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>

        <template v-else>
          <a-empty style="height: 200px; width: 100%; margin-top: 50px" />
        </template>
      </div>

      <!-- 分页器 -->
      <div style="display: flex">
        <div class="page-total">共 {{ state.total }} 条</div>
        <a-pagination
          :total="state.total"
          :current="state.page"
          :pageSize="state.pageSize"
          showSizeChanger="true"
          @change="PageChange"
        />
      </div>
    </div>
  </div>

  <!-- 详情弹框 -->
  <FileDetailModal
    :visible="state.visibleFileDetai"
    :data="viewItem"
    :index="state.fileIndex"
    @addTagChange="addTag"
    @onClose="fileDetailClose"
    :isPublish="state.isPublish"
    :openType="'chengPianPublish'"
  />

  <!-- 导出弹框 -->
  <ExportMdal
    :visible="state.visibleExport"
    @cacel="state.visibleExport = false"
  />
  <!-- 清理内存 -->
  <CleaningModal
    :visible="visibleCleaning"
    @onCancel="visibleCleaning = false"
    @onSubmit="onSubmitClean"
  />

  <!-- 查看成片抽屉 -->
  <ViewFilm
    ref="ViewFilmRef"
    :accountList="state.accountList"
    :editingRecordTitle="state.editingRecordTitle"
  ></ViewFilm>

  <kuarong
    :capacityToTalFormat="state.capacityToTalFormat"
    ref="kuarongReftask"
  ></kuarong>
</template>

<script setup>
import {
  reactive,
  onMounted,
  onUnmounted,
  watch,
  ref,
  nextTick,
  createVNode,
  defineProps,
} from "vue";
import request from "@/common/utils/request";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import kuarong from "@/views/shotstack/MaterialCenter/modules/kuarong.vue";

const router = useRouter();
const route = useRoute();

import { saveAs } from "file-saver";

import { convertToDateOnly } from "@/views/shotstack/MuseMixedCut/utools";

import {
  SearchOutlined,
  DeleteOutlined,
  EllipsisOutlined,
  ExclamationCircleOutlined,
  EyeOutlined,
  CloudUploadOutlined,
  DownOutlined,
  ArrowDownOutlined,
  MoreOutlined,
  QuestionCircleOutlined
} from "@ant-design/icons-vue";

import ExportMdal from "@/views/shotstack/components/ExportMdal/index.vue";

import { message, Modal, Empty, notification } from "ant-design-vue";
import store from "@/store/index.js";

import CleaningModal from "@/views/shotstack/MaterialCenter/modules/CleaningModal.vue";

// 查看素材详情列
import FileDetailModal from "@/views/shotstack/MaterialCenter/modules/FileDetailModal.vue";

import UpdateFilmItem from "@/views/shotstack/MaterialCenter/UpdateFilmItem.vue";
// 查看成片抽屉
import ViewFilm from "./modules/ViewFilm.vue";

const ViewFilmRef = ref(null);

const props = defineProps({
  CreativeTaskShow: {
    type: Boolean,
    default: false,
  },
});

const kuarongReftask = ref(null);

const state = reactive({
  activeKey: "1",

  showMore: false, // 项目是否展示更多
  // 已使用空间
  capacityFormat: "",
  // 免费空间
  capacityToTalFormat: "",
  // 已使用空间百分比
  percent: 0,
  // 搜索成片
  keyword: "",
  // 头部项目列表
  itemList: [],
  // 素材列表
  materialList: [],
  // 当前选择的成片项目
  selectId: 0,
  // 下载素材弹窗
  visibleExport: false,
  // --
  multimedia_id: "",
  // 查看详情弹窗展示
  visibleFileDetai: false,

  // 查看详情弹窗索引
  fileIndex: 0,
  // 数据总数
  total: 0,
  // 分页器
  pageSize: 10,
  page: 1,
  status: null,
  // 开始结束时间
  time: ["", ""],
  // 搜索用的开始和结束时间
  start_time: "",
  end_time: "",
  // 搜索按钮loding
  serchLoding: false,
  // 当前预览的id
  viewItem_id: "",
  checkedAll: false,

  editingRecordTitle: "", //混剪项目(任务)名称
});

// 当前预览的项
const viewItem = computed(() => {
  return state.materialList.find((ele) => ele.id == state.viewItem_id);
});

// 获取剩余空间
const getCapacity = () => {
  request.get("/work_ai", "/user/shotstack/media/capacity").then((res) => {
    state.capacityFormat = res.capacityFormat;
    state.capacityToTalFormat = res.capacityToTalFormat;
    if (res.capacityToTalBytes >= 1) {
      state.percent = +(
        (Number(res.capacityBytes) / Number(res.capacityToTalBytes)) *
        100
      ).toFixed(1);
      return
    } 
    state.percent = 100
  });
};

// 分页change事件
const PageChange = (page, pageSize) => {
  state.page = page; //当前页码
  state.pageSize = pageSize; //当前页数
  store.dispatch('setPageData',{CreativeTask:{page,pageSize}})
  state.checkedAll = false;
  state.materialList.forEach((item) => {
    item.checkedValue = false;
  });
  getMediaList();
};

const imageLoaded = (item) => {
  item.spinning = false;
};

// 获取成片列表

// 定时器
let timer = null;
const getMediaList = async () => {
  if(store.getters?.pageData?.CreativeTask?.page){
    state.page = store.getters.pageData.CreativeTask.page
    state.pageSize = store.getters.pageData.CreativeTask.pageSize
  }
  state.serchLoding = true;
  const params = {
    start_time: state.start_time,
    end_time: state.end_time,
    page: state.page,
    pageSize: state.pageSize,
    // 搜索名称
    keyword: state.keyword,
    // 剪辑状态
    status: state.status,
  };
  return new Promise(async (resolve, reject) => {
    try {
      const res = await request.get(
        "/work_ai",
        "/user/shotstack/shotstackTask/list",
        params
      );
      state.materialList = res.result.data;
      state.total = res.result.total;
      state.serchLoding = false;
      // 判断是否有进行中的 如果有三秒请求一次接口
      let inProgressList = [];
      res.result.data.forEach((item) => {
        if (item.total_number - item.fail_number > item.success_number) {
          inProgressList.push(item);
        }
      });
      if (inProgressList.length > 0) {
        timer = setTimeout(() => {
          getMediaList();
        }, 3000);
      } else {
        clearTimeout(timer);
      }

      resolve(res.result.data)
      console.log(res, "创作成片列表");
    } catch (error) {
      state.serchLoding = false;
      console.log(error);
    }
  });
 
};

// 清除定时
const clearTimer = () => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
};

// 选择日期发生变化
const timeChange = (value, model) => {
  console.log(model, "model");
  state.start_time = model[0];
  state.end_time = model[1];
  // // 日期被设为空值, 重新获取列表数据
  model[0] == "" && model[1] == "" && getMediaList();
};

// 下载素材
const downloadFille = (type, data) => {
  let ids = [];
  if (type == "items") {
    ids = selectItems.value.map((ele) => ele.id);
  } else {
    ids = [data.id];
  }
  request
    .put("/work_ai", "/user/shotstack/media/download", {
      ids,
    })
    .then((res) => {
      state.visibleExport = true;
    });
};

// 删除 某项
const deleteClick = (item) => {
  Modal.confirm({
    title: `提示`,
    content: `确定删除 ${item.title} 么？`,
    icon: createVNode(ExclamationCircleOutlined),
    cancelText: "取消",
    okText: "确定",
    onOk() {
      request
        .del("/work_ai", "/user/shotstack/shotstackTask/delete", {
          id: item.id,
        })
        .then((res) => {
          // state.groupItem = {};
          message.success("删除成功");
          getMediaList();
        });
    },
  });
};

// 下载全部
const downAll =  async(item) => {

  Modal.confirm({
    title: `提示`,
    content:`确定下载 ${item.title} 的全部成片么？`,
    icon: createVNode(QuestionCircleOutlined),
    cancelText: "取消",
    okText: "确定",
   async onOk() {
      const res = await  request
        .put("/work_ai", "/user/shotstack/media/video/down", {
          id: item.id,
        })
     console.log(res, '下载全部的结果');
     
     state.visibleExport = true;     
    },
  });

}

// 批量删除
const deleteItems = () => {
  Modal.confirm({
    title: `确定删除这些素材吗？`,
    icon: createVNode(ExclamationCircleOutlined),
    cancelText: "取消",
    okText: "确定",
    onOk() {
      request
        .del("/work_ai", "/user/shotstack/media", {
          mediaIds: selectItems.value.map((item) => item.id),
        })
        .then((res) => {
          // state.groupItem = {};
          message.success("删除成功");
          getMediaList();
        });
    },
  });
};

const UpdatebVisiale = ref(false);
const Updateb_name = ref("");

const Request = async (data) => {
  let params = {
    merchant_library_id: data.merchant_library_id,
    folder_type: "video",
  };
  const res = await request.get(
    "/work_ai",
    "/user/shotstack/folder/select/list",
    params
  );
  optionsDetail.value = res.result;
};

// 清空筛选数据
const resetData = () => {
  state.start_time = "";
  state.end_time = "";
  state.time = [];
  state.page = 1;
  state.pageSize = 10;
  state.status = null;
  state.keyword = "";
};
const resetSerch = () => {
  resetData();
  getMediaList();
};


const shotstackTaskId = ref(Number(route.query?.shotstack_task_id))

watch(
  () => props.CreativeTaskShow,
  (nv) => {
    if (nv) {
      resetData();
      getMediaList().then((res)=>{
        if(route.query?.shotstack_task_id){
          if(shotstackTaskId.value){
            ViewFilmRef.value?.controls?.open(shotstackTaskId.value);
            shotstackTaskId.value = 0
          }
         
        }
      })
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

// 获取发布成片平台下拉列表
const getAccountList = () => {
  request
    .get("/work_ai", "/org/platform/account/shotStackList", {
      filterShow: 1, //是否过滤掉没有对接的平台 1-是 0-不是
    })
    .then((res) => {
      state.accountList = res.result;
    });
};

getAccountList();

// 清理内存 弹窗
const visibleCleaning = ref(false);
// 清理内存
const clearClick = () => {
  visibleCleaning.value = true;
};

// 关闭内存弹窗
const onSubmitClean = () => {
  visibleCleaning.value = false;
  getCapacity();
};
// 查看详情组件关闭回调
const fileDetailClose = () => {
  state.isPublish = false;
  state.visibleFileDetai = false;
};
// 查看发布平台
const publishDetailHandle = (item, index) => {
  state.isPublish = true;
  itemClick(item, index);
};

// 去下载中心
const goDowloadCenter = () => {
  router.push({
    name: "Download",
  });
};

// 打开查看成片抽屉
const showViewFilmRef = (id, item) => {
  if (item.total_number - item.fail_number <= 0) {
  return message.warning("合成失败, 请重试")
  } else {
   state.editingRecordTitle = item.editing_record_title;
   ViewFilmRef.value?.controls?.open(id);
}
  
 
};

// 扩容
const addMater = () => {
  kuarongReftask.value?.showModal();
};



onMounted(() => {
  if(store.getters?.pageData?.CreativeTask?.page){
    state.page = store.getters.pageData.CreativeTask.page
    state.pageSize = store.getters.pageData.CreativeTask.pageSize
  }
  getCapacity();
});


onUnmounted(() => {
  clearTimer()
})

defineExpose({
  clearTimer,
});
</script>

<style lang="less" scoped>
@interval: 20px;

.ComposeMaterial {
  padding: 0 @interval;
  padding-left: 0;
  // min-width: 1380px;
  // min-width: 1380px;

  // 最头部标题和剩余空间
  .title_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  // 第二层 搜索容器
  .serch_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;

    .serch_left {
      display: flex;
      gap: 0 10px;

      .serch_item {
        display: flex;
        justify-content: center;
        align-items: center;

        .left_prefix {
          padding: 0 25px;
          background-color: #ffffff;
          line-height: 30px;
          border: 1px solid #d9d9d9;
          border-right: none;
        }
      }
    }
  }

  // 主要的项目列表和素材列表
  .content_box {
    // 头部项目选择列表
    .list_item_box {
      margin: 25px 0;
      display: flex;
      justify-content: space-between;

      .switchover {
        min-width: 71px;
        padding: 5px 25px;
        cursor: pointer;
        display: flex;
        align-items: start;
      }
    }

    // 下方素材列表
    .material_item_box {
      // display: flex;
      min-width: 920px;

      .file-list {
        // margin-top: 20px;
        display: grid;
        // justify-content: space-between;
        // gap: 20px;
        // flex-wrap: wrap;
        grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
        overflow: auto;
        min-width: 920px;

        .file-item {
          // background-color: #fff;
          border-radius: 7px;
          overflow: hidden;
          margin-right: 10px;
          // margin-bottom: 35px;
          // padding: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          position: relative;
          cursor: pointer;

          .use_release {
            color: #0076ff;
            background: #d0d0d0;
            border-radius: 5px;
            padding: 2px 4px;
            font-weight: 500;
          }

          .badge {
            position: absolute;
            top: 28px;
            right: 25px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            color: #fff;
          }

          .icon-postion {
            position: absolute;
            top: 48px;
            left: 50px;
            font-size: 22px;
            cursor: pointer;
          }

          .image-box {
            margin-top: 40px;
            width: 100%;
            text-align: center;

            .image {
              width: 70px;
              height: 70px;
              border-radius: 4px;
              margin: 0 auto;
              position: relative;

              .image-mask {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 70px;
                height: 70px;
                border-radius: 4px;
                background: rgba(0, 0, 0, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                opacity: 0;
                color: #fff;

                .icon-eye-filled {
                  font-size: 24px;

                  &:hover {
                    color: #2878ff;
                  }
                }
              }

              &:hover {
                .image-mask {
                  opacity: 1;
                }
              }

              .durationText {
                position: absolute;
                left: 2px;
                bottom: 0px;
                color: #fff;
              }
            }

            .image-name {
              padding: 0 6px;
              height: 50px;
              padding-top: 5px;
              word-wrap: break-word;
            }

            .image-time {
              font-size: 12px;
              color: #9ea4aa;
            }
          }

          .content_box {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            // 描述容器
            .vidoe_msg_box {
              height: 60px;
              // padding: 12px 12px;
              // height: 100%;

              .title {
                text-align: left;
                font-weight: 700;
                margin-top: 5px;
                display: flex;
                justify-content: space-between;
                position: relative;

                .text_ellipsis {
                  display: inline-block;
                  // max-width: 200px; /* 设置最大宽度，根据需要调整 */
                  flex: 1;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  vertical-align: middle;
                  /* 根据需要调整 */
                }

                .ellipsisOutlined {
                  margin-left: 5px;
                }

                .ipt {
                  .confirm {
                    &:hover {
                      color: #2878ff;
                    }
                  }

                  .cancel {
                    &:hover {
                      color: #0076ff;
                    }
                  }
                }
              }

              // 底部描述
              .bottom_msg {
                text-align: left;
                display: flex;
                justify-content: space-between;
              }

              // 底部标签
              .tags_box {
                text-align: left;
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 7px;

                &:hover {
                  &::-webkit-scrollbar {
                    display: block;
                  }

                  padding-bottom: 0;
                }

                &::-webkit-scrollbar {
                  height: 5px;
                  /* 滚动条的高度，垂直滚动条可能用得上 */
                  display: none;
                }

                &::-webkit-scrollbar-thumb {
                  background: #888;
                  /* 滑块的背景颜色 */
                  border-radius: 5px;
                  /* 滑块的圆角 */
                }
              }
            }

            .type-box {
              width: 100%;
              height: 120px;
              position: relative;
              background-color: #000;
              border-radius: 8px;

              :deep(.ss-spin-nested-loading > div > .ss-spin .ss-spin-text) {
                text-shadow: none;
              }

              .schedule {
                position: absolute;
                right: 0;
                top: 0;
                z-index: 10;
                // background-color: #f3c548;
                background-color: #239842;
                color: #fff;
                font-size: 11px;
                padding: 2px 8px;
                border-radius: 0 0 0 8px;
              }

              .loding_item {
                // height: 100%;
                height: 120px;
                width: 100%;
                background-color: #dadada;
                align-items: center;
                padding: 15px;
                position: relative;
                overflow: hidden;
                cursor: pointer;
                border-radius: 5px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 10px;

                .loding_progress {
                  width: 100%;
                }

                .loding_text {
                  font-weight: 600;
                }

                .loding_dec {
                  .loding_dec_text {
                    color: #9b9b9b;
                    margin-left: 5px;
                  }
                }
              }

              .text-box {
                width: 100%;
                height: 100%;

                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 5px;
                padding: 20px;

                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;

                .text {
                  display: -webkit-box;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }

              .image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
              }

              .video-box {
                width: 100%;
                height: 120px;
                border-radius: 8px;
              }

              .duration {
                position: absolute;
                bottom: 5px;
                right: 8px;
                padding: 0 5px;
                border-radius: 5px;
                background: rgba(0, 0, 0, 0.3);
                color: #fff;
              }

              .status {
                position: absolute;
                bottom: 5px;
                left: 8px;
                padding: 0 5px;
                border-radius: 5px;
                // background: rgba(0, 0, 0, 0.3);
                color: #fff;
              }

              .status_active {
                &:hover {
                  color: var(--ss-primary-color);
                }
              }

              .audio-box {
                height: 100%;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
    }
  }
}

.icon_eye {
  font-size: 18px;
  margin-right: 8px;
  color: #fff;
}

:deep(.model_upload) {
  height: 165px !important;
  width: 200px !important;
  border-radius: 10px !important;
}

.model_upload_text {
  margin-top: 40px;
  color: #999;
  font-size: 16px;
}

.all_choose {
  display: flex;
  align-items: center;
  margin-right: 5px;

  .all_choose_text {
    margin-left: 10px;
    font-size: 14px;
    color: #989898;
    padding-right: 20px;
    border-right: 1px solid #989898;
  }
}

.page-total {
  margin: 5px 10px 0 0;
  font-size: 15px;
  color: #333;
}
</style>
